<script setup>
import { ref, reactive, onMounted } from 'vue'
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import CategoryTabs from './components/CategoryTabs.vue'
import ContentGrid from './components/ContentGrid.vue'
import { getHomeFeeds } from '@/services/homeFeedsApi.js'

// 当前选中的分类
const activeCategory = ref('推荐')

// 分类数据
const categories = [
  '推荐', '学习', '生活', '美食', '穿搭', '旅行', '运动', '娱乐', '职场', '情感'
]

// 状态管理
const contentData = ref([])
const loading = ref(false)
const error = ref(null)

// 获取内容数据的异步函数
const fetchContentData = async (category = '推荐') => {
  try {
    loading.value = true
    error.value = null
    
    const result = await getHomeFeeds({
      category: category
    })
    
    if (result.success) {
      contentData.value = result.data
      console.log('✅ API调用成功，获取到数据:', result.data.length, '条')
    } else {
      throw new Error('获取数据失败')
    }
  } catch (err) {
    error.value = err.message
    console.error('获取内容失败:', err)
  } finally {
    loading.value = false
  }
}

// 切换分类
const switchCategory = async (category) => {
  activeCategory.value = category
  await fetchContentData(category)
}

// 组件挂载时获取初始数据
onMounted(() => {
  fetchContentData('推荐')
})
</script>

<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <Header />
    
    <div class="main-container">
      <!-- 左侧导航栏 -->
      <Sidebar />
      
      <!-- 主内容区域 -->
      <div class="content-area">
        <!-- 分类标签栏 -->
        <CategoryTabs 
          :categories="categories" 
          :active-category="activeCategory"
          @switch-category="switchCategory"
        />
        
        <!-- 内容网格 -->
        <ContentGrid :content-data="contentData" />
      </div>
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: white;
}

.app {
  min-height: 100vh;
}

.main-container {
  display: flex;
  width: 100%;
  padding-top: 60px;
  box-sizing: border-box;
}

.content-area {
  flex: 1;
  margin-left: 80px;
  padding: 0;
  background: white;
  min-width: 0;
}
</style>
